import Vue from 'vue'
import VueRouter from 'vue-router' //导入自己的Router路由 
Vue.use(VueRouter)//vue.use声明一下
/****
 * 1 $route.params.id不是router
 * 2 子路由要写router-view  路径不要写/
 * 3 路由的时候要加s routes==!router(x错误)
 * 4 在写路由components的一定要写复数 加s
 */

 let zyi=`
    1 $route.params.id不是router {{$route.name}} <br>
    2 :to==>子路由要写router-view  children:[]路径不要写/ <br>
    3 路由的时候要加s routes==!router(x错误)<br>
 `
const first={template:`<div>first内容</div>`}
const second={template:`<div>second</div>`}
const home={template:`<div>home</div>`}
const he={template:`<div>"注意写法$route.params.id不是router"{$route.name}} {{$route.params.id}}-{{$route.params.fh}}</div>`}
const me={template:`<div>me={{$route.name}}={{$route.params.id}}={{$route.params.ck}}</div>`}
const se1={template:`<div class="asdf">
                        <h2>组件1</h2> 
                        <router-view class="sadfd"></router-view>
                     </div>`
          }
          
const router=new VueRouter({
      mode:'history',
      base:'__dirname',//当前的本地路径   
      routes:[
          {path:'/',name:'home', components:{
            default: home,
            left:first,
            right:second
          }}, 
          {path:'/first',sname:'he',components:{
            default:he,
            left:second,
            right:first
          }}
      ]

})

new Vue({
    router,
    template: `<div id="r">
                <div>${zyi} </div>
                <h1>导航</h1>
                <p>{{$route.name}}</p>
                <ol>
                  <li><router-link to='/'>home</router-link></li>
                  <li><router-link to='/first'>first</router-link></li>
                </ol>
                <router-view class="sadfj" ></router-view>
                <router-view class="sadfj" name="left" style="float:left;width:50%;background-color:#ff6600; height:300px"></router-view>
                <router-view class="sadfj" name="right" style="float:left;width:50%;background-color:yellow; height:300px"></router-view>
              </div>`
  }).$mount('#app')



// new Vue({ //router-pam
//     router,
//     template: `<div id="r">
//                 <div>${zyi} </div>
//                 <h1>导航</h1>
//                 <p>{{$route.name}}</p>
//                 <ol>
//                   <li><router-link to='/'>home</router-link></li>
//                   <li><router-link to='/first'>first</router-link></li>
//                     <ol>
//                         <li><router-link :to='{name:"home-first-he",params:{id:"123",fh:"你好"}}'>first</router-link></li>
//                         <li><router-link :to="{name:'home-first-me',params:{id:'45',ck:'路由传参数'}}">second</router-link></li>
//                     </ol>
//                   <li><router-link to='/second'>second</router-link></li>
//                 </ol>
//                 <router-view class="sadfj" ></router-view>
//                 <router-view class="sadfj" name="left" style="float:left;width:50%;background-color:#ff6600; height:300px"></router-view>
//                 <router-view class="sadfj" name="right" style="float:left;width:50%;background-color:yellow; height:300px"></router-view>
//               </div>`
//   }).$mount('#app')
  